<!-- pendingReceiptOrderDetailPage.vue -->
<template>
    <div v-loading="loading" class="pending-receive-order-detail-container">
        <!-- Document Information Group -->
        <el-card class="info-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <div class="title-wrapper">
                        <span class="title-text">待收款单据信息</span>
                        <span v-if="multiStoreMode" class="store-name">{{ pendingReceiveOrder.storeName }}</span>
                        <el-tag
                            :type="pendingReceiveOrder.progressState.code === ProgressState.AllDone.code ? 'success' :
                                pendingReceiveOrder.progressState.code === ProgressState.PartDone.code ? 'warning' : 'info'"
                            size="small" class="status-tag">
                            {{ pendingReceiveOrder.progressState.name }}
                        </el-tag>
                    </div>
                    <div class="action-buttons">
                        <el-button plain @click="handlePrint">
                            <el-icon>
                                <Printer />
                            </el-icon> 打印
                        </el-button>
                    </div>
                </div>
            </template>

            <el-form ref="form" :model="pendingReceiveOrder" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="单据编号">
                            <span>{{ pendingReceiveOrder.docCode }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户">
                            <span>{{ pendingReceiveOrder.targetObject?.name || '-' }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="源单据类型">
                            <span>{{ pendingReceiveOrder.parentDocType?.name || '-' }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="源单据编号">
                            <el-link v-if="pendingReceiveOrder.parentDocCode" :underline="false" type="primary"
                                @click="viewSourceDocument">
                                {{ pendingReceiveOrder.parentDocCode }}
                            </el-link>
                            <span v-else>-</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="源单据标题">
                            <span>{{ pendingReceiveOrder.parentDocTitle || '-' }}</span>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-card>

        <!-- Related Receive Orders -->
        <el-card class="items-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <div class="title-wrapper">
                        <span class="title-text">关联收款单据</span>
                        <span class="total-info">共{{ pendingReceiveOrder.receiveRelationList.length }}条记录</span>
                    </div>
                </div>
            </template>

            <el-table :data="pendingReceiveOrder.receiveRelationList" style="width: 100%">
                <el-table-column prop="receiveOrder.docCode" label="收款单编号" width="180" />
                <el-table-column prop="receiveOrder.title" label="收款单标题" width="180" />
                <el-table-column label="客户" width="120">
                    <template #default="scope">
                        {{ scope.row.receiveOrder.targetObject?.name || '-' }}
                    </template>
                </el-table-column>
                <!--
                <el-table-column label="状态" width="100" align="center">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.receiveOrder.status.code === CommonOrderStatus.Passed.code ? 'success' : 'info'">
                            {{ scope.row.receiveOrder.status.name }}
                        </el-tag>
                    </template>
                </el-table-column>
                -->
                <el-table-column label="收款日期" width="120" align="center">
                    <template #default="scope">
                        {{ formatDate(scope.row.receiveOrder.operateDate) }}
                    </template>
                </el-table-column>
                <el-table-column label="核销金额" align="right" width="120">
                    <template #default="scope">
                        {{ formatCurrency(scope.row.hexiaoAmount) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template #default="scope">
                        <el-link :underline="false" type="primary"
                            @click="viewReceiveOrderDetail(scope.row.receiveOrder)">
                            查看详情
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- Summary Information -->
        <el-row :gutter="16" class="summary-row">
            <el-col :span="12">
                <el-card class="amount-summary-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <div class="title-wrapper">
                                <span class="title-text">核销汇总</span>
                            </div>
                        </div>
                    </template>

                    <div class="amount-summary-content">
                        <div class="amount-item">
                            <span class="label right-align">总金额:</span>
                            <span class="value left-align">{{ formatCurrency(pendingReceiveOrder.totalMount) }}</span>
                        </div>
                        <div class="amount-item">
                            <span class="label right-align">已核销:</span>
                            <span class="value left-align">{{ formatCurrency(pendingReceiveOrder.payedMount) }}</span>
                        </div>

                        <div class="amount-item">
                            <span class="label right-align">处理中:</span>
                            <span class="value left-align">{{ formatCurrency(pendingReceiveOrder.payingMount) }}</span>
                        </div>

                        <div class="amount-item">
                            <span class="label right-align">待核销:</span>
                            <span class="value left-align">{{ formatCurrency(pendingReceiveOrder.pendingPayMount)
                                }}</span>
                            <el-button v-if="pendingReceiveOrder.progressState.code !== ProgressState.AllDone.code"
                                type="primary" size="small" @click="handleReceivePayment" style="margin-left: 12px;">
                                收款办理
                            </el-button>
                        </div>

                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card class="other-info-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <div class="title-wrapper">
                                <span class="title-text">其他</span>
                            </div>
                        </div>
                    </template>
                    <div class="amount-summary-content">
                        <div class="amount-item">
                            <span class="label right-align">制单人:</span>
                            <span class="value left-align">{{ pendingReceiveOrder.docMaker || '-' }}</span>
                        </div>
                        <div class="amount-item">
                            <span class="label right-align">制单时间:</span>
                            <span class="value left-align">{{ formatDate(pendingReceiveOrder.recordDate) }}</span>
                        </div>

                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { PendingReceiveOrder } from '../../public/engine/funds/pendingReceiveOrder'
import { ProgressState, CommonOrderStatus } from '../../public/engine/common/docDefinition'
import { FundUiAction } from '../../public/engine/uiAction/fundUiAction'
import { Util } from '../../public/utils/util'
import { DateUtil } from '../../public/utils/dateUtil'
import { ElMessage } from 'element-plus'
import { Printer } from '@element-plus/icons-vue'
import { uiNavigation } from '../../public/views/uiEntrance/uiNavigation'
import { Engine } from '../../public/engine/engine'
import { ipcParam } from '../../public/engine/ipc/ipcParam'

export default {
    name: 'pendingReceiptOrder',
    components: {
        Printer
    },

    data() {
        return {
            pendingReceiveOrder: PendingReceiveOrder.empty(),
            fundUiAction: new FundUiAction(),
            loading: false,
            orderId: "",
            ProgressState,
            CommonOrderStatus
        }
    },

    computed: {
        multiStoreMode() {
            return Engine.getOrgSettings().multiStoreMode;
        },
        progressPercentage() {
            if (this.pendingReceiveOrder.totalMount === 0) return 0;
            const percentage = ((this.pendingReceiveOrder.totalMount - this.pendingReceiveOrder.pendingPayMount) / this.pendingReceiveOrder.totalMount) * 100;
            return Math.round(percentage);
        },

        progressStatus() {
            if (this.pendingReceiveOrder.progressState.code === ProgressState.AllDone.code) {
                return 'success';
            } else if (this.pendingReceiveOrder.progressState.code === ProgressState.PartDone.code) {
                return 'warning';
            }
            return '';
        }
    },

    mounted() {
        this.orderId = this.$route.query.id || "";
        if (this.orderId) {
            this.loadPendingReceiveOrderData();
        }
    },

    methods: {

        // 发起收款
        handleReceivePayment() {
           
           ipcParam.createdWithPendingReceiptOrders = { targetObj:this.pendingReceiveOrder.targetObject, 
            pendingOrders:[this.pendingReceiveOrder]};
           uiNavigation.showReceiptOrderDetailPage(this.$router, { createdWithPendingReceiptOrders: true });
        },

        // 打开源单据
        viewSourceDocument() {
            uiNavigation.showOrderDetail(this.$router,
                this.pendingReceiveOrder.parentDocType,
                this.pendingReceiveOrder.parentDocCode);
        },
        async loadPendingReceiveOrderData() {
            try {
                this.loading = true;
                const res = await this.fundUiAction.getPendingReceiveOrderDetailInfo(
                    null,
                    this.orderId
                );

                if (res) {
                    this.pendingReceiveOrder = res;
                } else {
                    ElMessage.error('获取待收款单详情失败');
                }
            } catch (error) {
                console.error('加载待收款单数据失败:', error);
                ElMessage.error('加载待收款单数据失败');
            } finally {
                this.loading = false;
            }
        },

        formatDate(date) {
            return date ? DateUtil.getDayTitle(date) : '-';
        },

        formatCurrency(value) {
            return Util.getFundString(value);
        },

        handlePrint() {
            // TODO: Implement print functionality
            ElMessage.info('打印功能待实现');
        },

        viewReceiveOrderDetail(receiveOrder) {
            // Navigate to receive order detail page
           uiNavigation.showReceiptOrderDetailPage(this.$router, { id: receiveOrder.id });
        }
    }
}
</script>

<style scoped>
.pending-receive-order-detail-container {
    padding: 16px;
    padding-bottom: 80px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 0px;
    padding: 0 16px;
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-text {
    font-size: 16px;
    font-weight: bold;
}

.store-name {
    font-size: 12px;
    color: #606266;
}

.status-tag {
    margin-left: 12px;
}

.total-info {
    color: #606266;
    font-size: 14px;
    white-space: nowrap;
}

.info-card,
.items-card,
.amount-summary-card,
.other-info-card {
    margin-bottom: 16px;
    border-radius: 8px;
}

.summary-row {
    margin-bottom: 16px;
    display: flex;
    align-items: stretch;
}

.summary-row .el-col {
    display: flex;
    flex-direction: column;
}

.summary-row .el-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.summary-row .el-card .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.amount-summary-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amount-item {
    display: flex;
    align-items: center;
}

.amount-item .label.right-align {
    text-align: right;
    flex: 0 0 100px;
    color: #606266;
    margin-right: 12px;
    font-size: 13px;
}

.amount-item .value.left-align {
    text-align: left;
    flex: 1;
    font-size: 13px;
    font-weight: bold;
}

.progress-info {
    padding: 20px 0;
}

.progress-text {
    margin-top: 12px;
    text-align: center;
    color: #606266;
    font-size: 14px;
}
</style>